<template>
  <div>
    <!-- title -->
    <div>
      <TitleCompound :title="title"></TitleCompound>
    </div>

    <!-- content -->
    <div>
      <p>
        <b><a href="https://cn.vuejs.org/api/reactivity-core.html#readonly">readonly</a></b>
      </p>
      <!-- 基础类型 -->
      <div>
        <h2>基础类型</h2>
        <p>sum: {{ sum }}</p>
        <el-button @click="sum++" type="primary" class="button">add one</el-button>
        <div>
          <p>sum is readonly, so it can't be changed。请查看console log</p>
          <el-alert type="warning" show-icon :closable="false">
            [Vue warn] Set operation on key "value" failed: target is readonly. RefImpl
          </el-alert>
        </div>
      </div>

      <!-- 对象 -->
      <div>
        <h2>对象</h2>
        <p>person: {{ person }}</p>
        <el-table :data="[person]">
          <el-table-column prop="name" label="name"></el-table-column>
          <el-table-column prop="age" label="age"></el-table-column>
          <el-table-column prop="gender" label="gender"></el-table-column>
        </el-table>
        <el-button @click="person.age++" type="primary" class="button">add one</el-button>
        <p>此时插件会提示代码： Cannot assign to 'age' because it is a read-only property</p>
        <div>
          <p>person is readonly, so its age can't be changed。请查看console log</p>
          <el-alert type="warning" show-icon :closable="false">
            [Vue warn] Set operation on key "age" failed: target is readonly. Proxy(Object) {name: '张三', age: 18,
            gender: 'male'}
          </el-alert>
        </div>
      </div>

      <!-- 对象数组 -->
      <div>
        <h2>对象数组</h2>
        <el-table :data="Persons">
          <el-table-column prop="name" label="name"></el-table-column>
          <el-table-column prop="age" label="age"></el-table-column>
          <el-table-column prop="gender" label="gender"></el-table-column>
        </el-table>
        <el-button @click="Persons[0].age++" type="primary" class="button">add one year to the first person's
          age</el-button>
        <p>此时插件会提示代码： Cannot assign to 'age' because it is a read-only property</p>
        <div>
          <p>Persons is readonly, so its age can't be changed。请查看console log</p>
          <el-alert type="warning" show-icon :closable="false">
            [Vue warn] Set operation on key "age" failed: target is readonly. Proxy(Object) {name: '张三', age: 18,
            gender: 'male'}
          </el-alert>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import TitleCompound from '@/components/TitleCompound.vue'
import type { Person } from '@/types'
import { reactive, readonly, ref } from 'vue'
// 基础类型
const title = 'Readonly Quickstart'

const sum = readonly(ref(0))

// 对象
const person = readonly(reactive<Person>({
  name: '张三',
  age: 18,
  gender: 'male',
}))


// 对象数组
const Persons = readonly(reactive<Person[]>([
  {
    name: '张三',
    age: 18,
    gender: 'male',
  },
  {
    name: '李四',
    age: 20,
    gender: 'female',
  },
  {
    name: '王五',
    age: 22,
    gender: 'male',
  },
]))

</script>

<style lang="scss" scoped>
.button {
  margin-top: 10px;
}
</style>
